 $(() => {

     class Lun {
         constructor(data) {
             this.data = data
             this.root = null
             this.index = 0
             this.length = this.data.length
             this.sliderBoxItemWidth = 1482;
             this.time = null
         }
         init() {
             this.createHtml()
             this.movenav()
             this.oUl = this.root.querySelectorAll(".slider-box")[0]
             this.autoPlay()
             this.stop()
             this.slect()
             this.oOl = this.root.querySelectorAll(".slider-nav")[0].children
             this.numbermove(0)
             this.numberclick()

         }
         createHtml() {
             this.root = document.createElement("div")
             this.root.className = "slider"
             let headhtml = this.data.map(function (ele) {
                 return `<li class="slider-box-item"><img src=${ele.src}></li>`
             }).join("")
             headhtml = `<ul class="slider-box">${headhtml}</ul>`
             let bodyhtml = `<span class="prev"></span><span class="next"></span>`
             bodyhtml = `<div class="slider-control">${bodyhtml}</div>`
             let foothtml = this.data.map((ele, index) => {
                 return `<li class="slider-nav-item"></li>`
             }).join("")
             foothtml = `<ol class="slider-nav">${foothtml}<ol>`
             this.root.innerHTML = headhtml + bodyhtml + foothtml
             let con = document.querySelector(".content-lun")
             con.appendChild(this.root)
         }
         autoPlay() {
             this.time = setInterval(() => this.left(), 3000)
         }
         stop() {
             this.root.onmouseenter = () => clearInterval(this.time)
             this.root.onmouseleave = () => this.autoPlay()
         }
         left() {
             this.index++;
             if (this.index >= this.length) this.index = 0
             this.oUl.style.left = -(this.sliderBoxItemWidth * this.index) + "px"
             this.numbermove(this.index)
         }
         right() {
             this.index--
             if (this.index <= -1) this.index = this.length - 1
             this.oUl.style.left = -(this.sliderBoxItemWidth * this.index) + "px"
             this.numbermove(this.index)
         }
         slect() {
             let choice = this.root.querySelector(".slider-control")
             choice.onclick = (e) => {
                 e = e || window.event
                 let target = e.target || e.srcElement
                 if (target.className == "prev") {
                     this.right();
                 } else if (target.className == "next") {
                     this.left();
                 }
             }
         }
         numbermove(num) {
             Array.from(this.oOl).forEach((ele) => ele.classList.remove("active"))
             this.oOl[num].classList.add("active")
         }
         numberclick() {
             for (let i = 0; i <= this.oOl.length; i++) {
                 this.oOl[i].onclick = () => {
                     this.numbermove(i)
                     this.index = i
                     this.oUl.style.left = -(this.sliderBoxItemWidth * (this.index)) + "px"
                 }
             }
         }
         movenav() {
             $(".slider").hover(function () {
                 $(".prev").css("display", "block")
             }, function () {
                 $(".prev").css("display", "none")
             })
             $(".slider").hover(function () {
                 $(".next").css("display", "block")
             }, function () {
                 $(".next").css("display", "none")
             })
         }
     }
     $.ajax({
         type: "post",
         url: "../server/index.php",
         dataType: "json",
         success: function (response) {
             let l = new Lun(response);
             l.init();
         }
     });
 })